<template>
	<section>
		<header class="bbtm fixed_u  w100 wallfff" v-if="isHerde"> 
			<a href="javascript:history.back()" class="_h"><i class="iconfont icon-Goback"></i></a>
			<h1 class="sz36 hue333 flex_core fontwt hei100">填写信息</h1> 
		</header>
		<div class="content" :class="{content_margin:!isHerde}" >
			<ul class="receive">
				<li><span>收货人</span><input type="text" placeholder="输入收货人姓名" v-model="ReceiveName" /></li>
				<li><span>联系电话</span><input type="text" placeholder="输入电话号码" v-model="ReceivePhone" /></li>
				<li><span>收货地址</span><input type="text" placeholder="输入收货地址" v-model="ReceiveAddress" /></li>
			</ul>
			<button class="recbut" @click="onReceive()">确认</button>
		</div>
		<transition name="fade">
			<div class="payment" v-show="isModle">
				<p class="p_tite">
					<a class="hue999 " @click="onModle()">×</a>
					<span class="hue333">确认付款</span>
				</p>
				<p class="p_moeny">
					<span >订单金额：<font>￥{{moenyCaes | moneyTwo}}</font></span>
				</p>
				<p class="p_text">选择支付方式</p>
				<ul class="payWay">
					<li class="flex_between" v-for="item in payWay" @click="onpayWay(item)">
						<p class="p_one"><i><img :src="item.imgs"></i><span>{{item.texts}}</span></p>
						<p>
							<i class="iconfont icon-xuanzhong  active" v-if="item.boole"></i>
							<i class="iconfont icon-kongxinyuan" v-else></i>
						</p>

					</li>
					<button class="payYes" @click="UnifiedOrder(),onModle()">确认付款</button>
				</ul>
			</div>
		</transition>
		
		<div class="payment_inte" v-if="pawds">
			<span>×</span>
			<input type="password" v-model="pawd" placeholder="输入支付密码" />
			<button  @click="pawdsBut(),inteYes()">确认支付</button>
		</div>
		
		<div class="layer" @click="onModle()" v-if="isModle"></div>
		
		<div class="layer_two" v-if="pawds" @click="pawdsBut()" ></div>
		<alipay :payAlipay="alipaysubmit"></alipay>
	</section>
	
</template>

<script>
	import { Toast } from 'mint-ui';
	import Qs from 'qs';
	import { Indicator } from 'mint-ui';
	import alipay from '../../components/Cardoil/alipay';
	import md5 from 'js-md5';
	export default{
		name:'discountDetails',
		components: {
			alipay
		},
		data(){
			return{
				alipaysubmit:'',
				isModle: false,
				pawds:false,
				moenyCaes:'0.00',
				pawd:'',
				payWay: [{
						imgs: require("../../assets/Cardoil/WeChat.png"),
						texts: '微信支付',
						PayType: 'Wxpay',
						boole: false
					},
					{
						imgs: require("../../assets/Cardoil/alipay.png"),
						texts: '支付宝支付',
						PayType: 'Alipay',
						boole: true
					},
					{
						imgs: require("../../assets/Cardoil/inte.png"),
						texts: '积分支付',
						PayType: 'integral',
						boole: false
					}
				],
				ReceiveName:'',
				ReceivePhone:'',
				ReceiveAddress:'',
				
			}
		},
		created: function() {
			this.urls = this.$store.state.urls;
			this.ImgUrls = this.$store.state.ImgUrls;
			this.isHerde = this.$store.state.Type;
			this.MembersID = this.$store.state.MembersID;
			this.EntityOilCard_ID=this.$store.state.EntityOilCardID;
			this.moenyCaes=this.$store.state.moenyCaes;
		},
		mounted: function() {
			console.log(this.EntityOilCard_ID);
			console.log(this.moenyCaes);
			if(!this.EntityOilCard_ID||!this.moenyCaes){
				Toast("请重新选择~");
				this.$router.push({
					path: '/cardoilAll/refillCard'
				});
			}
		},
		methods:{
			onModle: function() {
				this.isModle = !this.isModle;
			},
			pawdsBut:function(){
				this.pawds = !this.pawds;
			},
			onpayWay: function(item) {
				this.payWay.filter(function(arr) {
					arr.boole = false;
				})
				item.boole = true;
			},
			onReceive:function(){
				if(this.ReceiveName==""){
					Toast("请输入收货人姓名~")
				}else if(!/^1\d{10}$/.test(this.ReceivePhone)){
					Toast("手机号码格式不对")
				}else if(this.ReceiveAddress==""){
					 Toast("请填写收货地址~")
				}else{
					this.isModle=true; 
				} 
			},
			//支付接口
			UnifiedOrder: function() {
				this.payWay.filter((arr) => {
					if(arr.boole) {
						this.PayType = arr.PayType 
					} 
				});
				if(this.PayType=='Wxpay'){
					this.Wxpay()
					
				}else if(this.PayType=='Alipay'){
					this.Alipay()
				}else if(this.PayType=='integral'){
					this.integral()
				}else{
					console.log("错误信息~")
				} 
			},
			Wxpay:function(){
				console.log("微信")
			},
			Alipay:function(){
				console.log("支付宝");
				this.data = JSON.stringify({
						"MembersID": this.MembersID,
						"EntityOilCardID": this.EntityOilCard_ID,
						"ReceiveName": this.ReceiveName,
						"ReceivePhone": this.ReceivePhone,
						"ReceiveAddress": this.ReceiveAddress
				});  
				if(this.moenyCaes> 0 && this.MembersID) { 
					this.$http.post(this.urls + '/Pay/V1.0/UnifiedOrder', Qs.stringify({
						"Source": "wap",
						"PayType": "Alipay",
						"Price": this.moenyCaes,
						"Type": "OilCardBuy",
						"Data": this.data
					})).then((res) => {
						Toast(res.data.Return_Mess);
						console.log(res.data.Return_Data)
						let formtext = /<form.+>(.+)<\/form>/.exec(res.data.Return_Data)[0];
						console.log(formtext);
						this.alipaysubmit = formtext;
					}).catch((err) => {
						console.log(err);
					});
				}
			}, 
			integral:function(){
				this.$http.get(this.urls + "/WorkMembers/V1.0/GetMembersByID", {
					params: {
						"MembersID": this.MembersID
					}
				}).then((res) => {
					this.MembersInfo = res.data.Return_Data;
					
					if(this.MembersInfo.Members_HasPayPwd==0) {
						Toast("设置初始密码~")
						this.$router.push({
							path: '/mycentreAll/setpwd?types=pay'
						});
					} else {
						this.pawds=true;
					}
				}).catch((err) => {
					console.log(err)
				});
				
				console.log("积分")
			},
			inteYes:function(){
				this.data = JSON.stringify({
						"MembersID": this.MembersID,
						"EntityOilCardID": this.EntityOilCard_ID,
						"ReceiveName": this.ReceiveName,
						"ReceivePhone": this.ReceivePhone,
						"ReceiveAddress": this.ReceiveAddress
				}); 
				if(!this.pawd) {
					Toast("请输入密码~")
				}else{ 
					this.$http.post(this.urls + '/Pay/V1.0/PointPay', Qs.stringify({
						"Type": "OilCardBuy",
						"Data": this.data,
						'PayPwd':md5(this.pawd)
					})).then((res) => {
						
						 if(res.data.Return_ID==0){
						 	Toast(res.data.Return_Mess); 
						 	this.$router.push({
								path: '/cardoilAll/refillCard'
							});
						 }else{
						 	Toast(res.data.Return_Mess); 
						 }
						 this.pawd='';
					}).catch((err) => {
						console.log(err);
					});
				}
			}
			
			
		},
		filters: {
			moneyTwo: function(val) {
				let money = val
				if(money == 0) {
					money = 0.00;
				} else {
					money = Number(money).toFixed(2);
				} 
				return money
			}
		}
		
	}
</script>

<style scoped>
	.content {
		margin-top: 1.3333333333rem;
		margin-bottom: 2.8rem;
	}
	.content_margin{
		margin-top:0;
		margin-bottom:0;
	}
	.fade-enter-active {
		transition: all .3s ease;
	}
	
	.fade-leave-active {
		transition: all .5s ease;
	} 
	.fade-enter,
	.fade-leave-to {
		transform: translateY(100%);
		opacity: 1;
	}
	.payment {
		position: absolute;
		z-index: 102;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
	}
	
	.p_tite {
		width: 100%;
		line-height: 1.0666666666rem;
		padding: 0.3333333333rem 0.4rem;
		border-bottom: 1px solid #dcdcdc;
		font-size: 0.4533333333rem;
		text-align: center;
	}
	
	.p_tite a {
		font-size: 0.6666666666rem;
		float: left;
	}
	
	.p_tite span {
		text-indent: -0.4rem;
	}
	
	.p_moeny {
		height: 1.6rem;
		line-height: 1.6rem;
		padding: 0 0.4rem;
		color: #333;
		font-size: 0.4rem;
	}
	
	.p_moeny font {
		font-size: 0.56rem;
		color: #DF4444;
	}
	
	.p_text {
		font-size: 0.4rem;
		color: #333333;
		background-color: #f6f6f6;
		padding: 0.3333333333rem 0.4rem;
	}
	
	.payWay {
		width: 100%;
		padding: 0.2rem 0.4rem;
	}
	
	.payWay li {
		width: 100%;
		height: 1.2rem;
		line-height: 1.2rem;
		font-size: 0.3733333333rem;
		color: #333;
	}
	
	.payWay li p {
		display: inline-block;
	}
	
	.payWay li p.p_one i {
		display: inline-block;
		width: 0.5466666666rem;
	}
	
	.payWay li p.p_one i img {
		width: 100%;
		float: left;
		margin-top: 0.3rem;
	}
	
	.payWay li p.p_one span {
		float: right;
		margin-left: 0.2666666666rem;
	}
	
	.active {
		color: #DF4444;
	}
	
	.payYes {
		width: 100%;
		height: 1.0666666666rem;
		color: #fff;
		font-size: 0.4533333333rem;
		background-color: #DF4444;
		border-radius: 0.1333333333rem;
		outline: none;
		margin: 0.6666666666rem 0;
	}
	.receive{
		width: 100%;
		margin-top:1.6rem;
		margin-bottom: 2.6666666666rem;
	}
	.receive li{
		width: 100%;
		height: 1.2rem;
		line-height: 1.2rem;
		color:#333;
		padding: 0 0.4rem;
		background-color: #fff;
		border-bottom:1px solid #dddddd;
		font-size: 0.3733333333rem;
	}
	.receive li span{
		display: inline-block;
		width: 24%;
	}
	.receive li input{
		width: 75.5%;
		outline: none;
		font-size:0.3733333333rem;
		color: #999;
		height:0.9333333333rem;
	}
	.recbut{
		width:90%;
		height:1rem;
		margin-left: 5%;
		border-radius:0.1333333333rem;
		background-color: #DF4444;
		color: #fff;
		font-size: 0.4533333333rem;
	}
	.layer {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 101;
		width: 100%;
		height: 100%;
	}
	.layer_two{
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 101;
		width: 100%;
		height: 100%;
	}
	.payment_inte{
		width:90%;
		left: 5%;
		top: 25%;
		position: fixed;
		z-index: 102;
		background-color: #fff;
		border-radius:0.1333333333rem;
		padding: 0.4rem;
		padding-top: 0;
	}
	.payment_inte span{
		display: block;
		text-align: right;
		font-size:0.6666666666rem;
		color: #999;
	}
	.payment_inte input{
		width: 100%;
		height: 1.2rem;
		background-color: #F2F2F2;
		text-indent: 0.4rem;
		font-size: 0.3733333333rem;
		margin-bottom: 0.8rem;
		margin-top: 0.4rem;
		border-radius: 0.1333333333rem;
	}
	.payment_inte button{
		width:80%;
		height:0.9333333333rem;
		background-color: #DF4444;
		color: #fff;
		margin-left: 10%;
		font-size: 0.4533333333rem;
		border-radius: 0.1333333333rem; 
	}
</style>